<!-- ko if:tableTitle -->
<div data-bind="css: tableTitleClass">
    <span data-bind="text: tableTitle"></span>
</div>
<!-- /ko -->
<div data-bind="css: tableMainClass">
    <div data-bind="css: tableMainTheadClass">
        <table data-bind="css: tableMainTheadTableClass" cellpadding="0" cellspacing="0">
            <thead>
            <!-- ko foreach: {data: tableMainTheadTableColumns(), as : 'columns'} -->
            <tr>
                <!-- ko if:$root.operationColumnsIsFirst()==true -->
                <!-- ko if: $index() == $parent.tableMainTheadTableColumns().length-1 -->
                <!-- ko foreach: $parent.operationColumns() -->
                <th data-bind="css: $root.tableMainTheadTableThOtherClass , text: $data.text , style: {width: $data.width}"></th>
                <!-- /ko -->
                <!-- /ko -->
                <!-- /ko -->
                <!-- ko foreach: columns -->
                <th data-bind="css: $root.tableMainTheadTableThOtherClass ,
                            text: $data.text, style: {width: $data.width}, attr: {colspan: $data.colspan, rowspan: $data.rowspan}"></th>
                <!-- /ko -->
                <!-- ko if:$root.operationColumnsIsFirst()==false -->
                <!-- ko if: $index() == $parent.tableMainTheadTableColumns().length-1 -->
                <!-- ko foreach: $parent.operationColumns() -->
                <th data-bind="css: $root.tableMainTheadTableThOtherClass, text: $data.text , style: {width: $data.width}"></th>
                <!-- /ko -->
                <!-- /ko -->
                <!-- /ko -->
            </tr>
            <!-- /ko -->
            </thead>
        </table>
    </div>
    <div data-bind="css: tableMainTbodyClass ">
        <table data-bind="css: tableMainTbodyTableClass" cellpadding="0" cellspacing="0">
            <tbody data-bind="foreach: tableData">
            <tr data-bind="css: $index()%2==1?$parent.tableMainTbodyTableTrJsClass: $parent.tableMainTbodyTableTrOsClass, click: $parent.clickRow">
                <!-- ko if:$root.operationColumnsIsFirst()==true -->
                <!-- ko foreach: $root.operationColumns()-->
                <td data-bind="css: $root.tableMainTheadTableThOtherClass, style: {width: $data.width}">
                    <span data-bind="css: $data.icon, click: function(data, event){$parents[2].clickOperations($parents[1], data, event);}"></span>
                </td>
                <!-- /ko -->
                <!-- /ko -->

                <!-- ko foreach: {data: $parent.tableMainTheadTableColumns(), as : 'columns'} -->
                <!-- ko if: $index() == $parents[1].tableMainTheadTableColumns().length-1 -->
                <!-- ko foreach: columns-->
                <td data-bind="css: $root.tableMainTheadTableThOtherClass, style: {width: $data.width},
                                        text: $data.formatter ? $parents[2].formatter($root.computedValue($parents[1], $data.id), $data.formatter) : $root.computedValue($parents[1], $data.id)"></td>

                <!-- /ko -->
                <!-- ko if:$root.operationColumnsIsFirst()==false -->
                <!-- ko foreach: $root.operationColumns()-->
                <td data-bind="css: $root.tableMainTheadTableThOtherClass, style: {width: $data.width}">
                    <span data-bind="css: $data.icon, click: function(data, event){$root.clickOperations($parents[1], data, event);}"></span>
                </td>
                <!-- /ko -->
                <!-- /ko -->
                <!-- /ko -->
                <!-- /ko -->
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div data-bind="css: tableMainPageClass">
    <div data-bind="css: tablePageEachClass">
        <span>每页显示</span>
        <div data-bind="koSelect: {selectData: tablePageItems, initSelectItem: tablePageItem, clickSelectLi: changePage, ulHeight: ulHeight}, stopBinding"></div>
        <span>条，共</span>
        <span data-bind="css: tablePageRowsClass, text: tableDataRowNumbers">30</span>
        <span>条记录，当前</span>
        <span data-bind="css: tablePageCurrentPageClass, text: tablePageCurrentPageNumber">1</span>
        <span>/</span>
        <span data-bind="css: tablePageTotalPageClass, text: tablePageTotalPageNumbers">3</span>
        <span>页</span>
        <span data-bind="koButton, click: previousPage">上一页</span>
        <span data-bind="koButton, click: nextPage">下一页</span>
        <span data-bind="css: tablePageJumpClass">到</span>
        <div data-bind="koSelect: {selectData: tablePageJumpTotalPages, initSelectItem: tablePageJumpCurrentPage, clickSelectLi: changePage, ulHeight: ulHeight}, stopBinding"></div>
        <span>页</span>
    </div>
</div>